<template>
    <div class="container">
        <div class='content'>
            <PostItem v-for="(post,index) in postList" :key="index" :post="post" :greatDic="getGreat(post['_id'])"/>
        </div>
        <el-button size="mini" @click="lastPage">上一页</el-button>
        <span class="currentPage" >第{{currentPage}}页</span>
        <el-button size="mini" @click="nextPage">下一页</el-button>
        <span class="pageCount" v-cloak>共{{pageCount}}页</span>
        
        <!-- <div class='slide'></div> -->
    </div>
</template>

<script>
import { Message } from 'element-ui';
import PostItem from '../components/PostItem';
export default {
    name:'MainIndex',
    components:{
        PostItem,
    },
    data(){
        return {
            postList:[],
            greatArr:[],
            currentPage:1,
            pageCount:0,
        }
    },
    computed:{
        getGreat:function(value){
            return function (value){
                // console.log(value)
                if(this.greatArr.indexOf(value)>=0){
                    return true;
                }
                else{
                    return false;
                }
            }
        }
    },
    methods:{
        getHostPost(){
            this.$axios.post('/api/posts/getHostPosts',{page:this.currentPage})
            .then((res)=>{
                if(res.data.ok==1){
                    Message.error("出错了！");
                }
                else{
                    // console.log(res.data.data)
                    this.postList=res.data.data;
                    // console.log(res.data.data)
                }
            })
        },
        getPostsCount(){
            this.$axios.post('/api/posts/getPostsCount')
            .then((res)=>{
                this.pageCount=res.data.data;
            })
        },
        nextPage(){
            if(this.currentPage==this.pageCount){
                Message.warning("已经到最后一页了~~~");
            }
            else{
                this.currentPage+=1;
                this.getHostPost()
            }
        },
        lastPage(){
            if(this.currentPage==1){
                Message.warning("已经到第一页了~~~");
            }
            else{
                this.currentPage-=1;
                this.getHostPost()
            }
        }
    },
    created(){
        this.getPostsCount();
        this.getHostPost();
        this.$axios.post('/api/greats/getGreats')
        .then(res=>{
            if(res.data.ok==0){
                for(let i=0;i<res.data.data.length;i++){
                    this.greatArr.push(String(res.data.data[i].post));
                }
            }
            else{
                console.log("err")
            }
        });
    }
}
</script>

<style scoped>
.container{
    width:100%;
    height:auto;
}
.content{
    /* width:calc(100% - 208px); */
    width:100%;
    height:auto;
    float: left;
    box-sizing: border-box;
    border:1px solid #ccc;
    /* padding:0 5px; */
}
.slide{
    float: right;
    width:200px;
    height:auto;
    box-sizing: border-box;
    border:1px solid #ccc;
    padding:0 5px;
    margin-left:8px;
}
.currentPage{
    margin:0 8px;
}
.container button{
    margin:0 10px;
}
</style>

